import { reactive, computed } from 'vue'
import { useWindowStore } from '@/store/window'
import { IIconInfo } from '@/components/desktop-icon'

import { importIcon } from '@/utils/import-icon'
// import { importRoute } from '@/utils/import-route'
// import router from '@/router'

export function useDesktopIcon() {
  const windowStore = useWindowStore()

  // 导入图标列表
  const desktopIconList: IIconInfo[] = reactive([])
  const iconList = importIcon()
  iconList.forEach((item, index) => {
    desktopIconList.push({
      id: index + 1,
      imgUrl: item,
      name: index + 1 + 'menu',
      layerX: 0,
      layerY: 0,
      show: true,
      contextMenu: false,
      path: `/home/win/menu${index + 1}`,
      pageUrl: index >= 2 ? 'https://element-plus.gitee.io/zh-CN/component/button.html' : ''
    })
  })

  // 获取窗口高度给桌面图标定位
  const windowH = computed(() => windowStore.h)
  const row = Math.floor(windowH.value / 100)
  const col = Math.ceil(iconList.length / row)
  for (let i = 0; i < col; i++) {
    for (let j = 0; j < row; j++) {
      let index = i * row + j
      if (index < desktopIconList.length) {
        desktopIconList[index].layerX = i * 100 + 10
        desktopIconList[index].layerY = j * 100 + 10
      }
    }
  }
  windowStore.desktopIconList = desktopIconList
  // console.log(desktopIconList)

  // //添加路由
  // const routes = importRoute()
  // routes.forEach(route => {
  //   router.addRoute('home', route)
  // })

  return { desktopIconList }
}
